{% load wagtailadmin_tags i18n %}

<div class="w-tabs" data-tabs>
    <div class="w-tabs__wrapper">
        <div role="tablist" class="w-tabs__list">
            {% for child, identifier in self.visible_children_with_identifiers %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=identifier title=child.heading classes=child.classes|join:" " %}
            {% endfor %}
        </div>

        {# Comment Notifications Toggle  #}
        {% if self.form.show_comments_toggle %}
            <div class="w-relative w-flex w-justify-end w-pl-5 sm:w-px-2" data-comment-notifications hidden>
                <label class="switch w-p-0 w-m-0 w-font-normal w-flex w-justify-between w-text-14 w-space-x-2">
                    {% trans "Comment notifications" %}
                    {{ self.form.comment_notifications }}
                    <span class="switch__toggle"></span>
                </label>
            </div>
        {% endif %}
    </div>

    <div class="tab-content">
        {% for child, identifier in self.visible_children_with_identifiers %}
            <section
                id="tab-{{ identifier }}"
                class="w-tabs__panel {{ child.classes|join:" " }}"
                role="tabpanel"
                aria-labelledby="tab-label-{{ identifier }}"
                hidden
            >
                {{ child.render_html }}
            </section>
        {% endfor %}
    </div>
</div>
